let arrowLeft = document.querySelector('.arrow-left');
let arrowRight = document.querySelector('.arrow-right');
let dots = document.querySelectorAll('.dot-box > span');
let ul = document.querySelector('.img-box > ul');
let list = document.querySelectorAll('.img-box > ul > li');
let box = document.querySelector('.box');

// 克隆第一张和最后一张 (无缝切换)
// 1. 把最后一张克隆到第一张 cloneNode(true)
ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
// 2. 把第二张克隆到最后一张 cloneNode(true)
ul.appendChild(ul.children[1].cloneNode(true));
// 位置移动到第二张 (克隆完成之后, 第二张才是真正的第一张)
ul.style.transform = 'translateX(-100%)';
// 遇到了问题: 加载js的时候会出现过度效果
// 如何解决 --- 先移动, 然后再恢复过度效果 (延时执行)
setTimeout(() => {
  ul.style.transition = `transform 1s`;
}, 100);

// 需要控制的值, 标记数值 (初始值)
let index = 1;
// 保存上一次操作的值 (移除类名)
let lastIndex = 1;

arrowLeft.addEventListener('click', arrowLeftFn);
arrowRight.addEventListener('click', arrowRightFn);

// 下一张函数
function arrowRightFn() {
  console.log('下一张函数');
  ul.style.transform = `translateX(-${++index}00%)`;
  // 判断是否到达最后一张, 立马跳到第二张 (等到过度效果结束之后才能跳转)
  if (index > list.length) {
    index = 1;
    // 等待过度效果结束 (transitionend 事件)
    ul.addEventListener(
      'transitionend',
      () => {
        console.log('完成过度');
        // 关闭过渡效果
        ul.style.transition = `none`;
        // 回到第二张的位置
        ul.style.transform = `translateX(-${index}00%)`;
        // 重置 (更新元素的新样式)
        window.getComputedStyle(ul).transform;

        // 恢复动画
        ul.style.transition = `transform 1s`;
      },
      {
        // 绑定一次事件
        once: true,
      }
      
    );
   

  }
  dotcoloe()

  
}
// 上一张函数
function arrowLeftFn() {
  console.log('上一张函数');
  ul.style.transform = `translateX(-${--index}00%)`;

  // 检查是否已经回到第一张图片
  if (index <1) {
    // 重置索引
    index = list.length -2;
    // 跳到最后一张图片
    ul.addEventListener(
      'transitionend',
      () => {
        console.log('完成过度');
        // 关闭过渡效果
        ul.style.transition = `none`;
        // 回到第二张的位置
        ul.style.transform = `translateX(-${index}00%)`;
        // 重置 (更新元素的新样式)
        window.getComputedStyle(ul).transform;

        // 恢复动画
        ul.style.transition = `transform 1s`;
      },
      {
        // 绑定一次事件
        once: true,
      }
      
    );
   
   
  }

  dotcoloe()
}

dots.forEach((el, elIndex) => {
  el.addEventListener('click', () => {
    // 获取当前点击的小圆点下标, 更换index的值就就可以实现轮播图和小圆点下标一致
    index = elIndex + 1;
    ul.style.transform = `translateX(-${index}00%)`;
    dotcoloe
    
  });
});

function dotcoloe(){
  dots[index-1].classList.add('active');
  dots[lastIndex-1].classList.remove('active');
  lastIndex = index;
}

// changeActive 函数, 主要功能是修改激活类名





/*
// 自动轮播
autoPlay();
function autoPlay() {
  // 停止上一个定时器任务 (解决切换屏幕的bug)
  clearInterval(timer);
  timer = setInterval(() => {
    // 下一张函数
    arrowRightFn();
  }, 3000);
}

// 停止自动轮播 (鼠标移入轮播图范围之内)
box.addEventListener('mouseenter', () => {
  clearInterval(timer);
});

// 继续开始轮播 (鼠标移出轮播图范围)
box.addEventListener('mouseleave', () => {
  autoPlay();
});

// visibilityChange 功能: 浏览器标签页被隐藏/显示的时候触发该事件

document.addEventListener('visibilitychange', () => {
  // document.hidden 检测文档是否为隐藏
  // document.visibilityState

  // console.log('hidden', document.hidden);
  // console.log('visibilityState', document.visibilityState);

  if (document.hidden) {
    clearInterval(timer);
    console.log('隐藏');
  } else {
    autoPlay();
    console.log('显示');
  }
});*/


